<template>
	<el-table :data="tableData" border class="table" :max-height="height">
		<template v-for="(item, index) in options.list">
			<el-table-column :prop="item.prop" :label="item.title" :key="index" align="center" v-if="item.isClick">

				<template slot-scope="scope">
					<el-button
						v-if="item.prop == 'paystatus' || item.prop == 'particulars' || item.prop == 'employerLogs' || item.prop == 'userNameOrder' || item.prop == 'report' || item.prop == 'evalreport' || item.prop == 'remark' || item.prop == 'authorizedaccount' || item.prop == 'servceName'"
						@click="$emit(item.eventName, scope.row)" type="text" size="small">查看</el-button>
					<el-button v-if="item.prop != 'projectStatus'&&item.prop != 'cooperation'"   @click="$emit(item.eventName, scope.row)" type="text"
						size="small">{{ scope.row[item.prop] }}</el-button>
						<el-button v-if="item.prop != 'projectStatus'&&item.prop == 'cooperation'" :style="{color:scope.row.color}" @click="$emit(item.eventName, scope.row)" type="text"
						size="small">{{ scope.row[item.prop] }}</el-button>
					<p v-for="(sub, index) in scope.row.projectStatusList"    v-if="item.prop == 'projectStatus'" :key="index"
						class="project-status" @click="$emit(item.eventName, sub)">{{ sub.title }}</p>
				</template>
			</el-table-column>



			<el-table-column :prop="item.prop" :label="item.title" :key="index" v-else-if="item.prop == 'paystatus'"
				align="center">
				<template slot-scope="scope" v-if="item.prop == 'paystatus'">
					<span @click="$emit(item.eventName, scope.row)" class="project-status"
						v-show="scope.row.paystatus == 1 || scope.row.paystatus == 0" :class="{ ck: scope.row.paystatus == 1 }">{{
							scope.row.paystatus == 0 ?
							'积分充值' :
							'已充值'
						}}</span>
					<span class="project-status gary" v-show="scope.row.paystatus == 2">积分充值</span>

				</template>
			</el-table-column>

			<el-table-column :prop="item.prop" :label="item.title" :key="index" v-else-if="item.prop == 'servceName'"
				align="center">
				<template slot-scope="scope" v-if="item.prop == 'servceName'">
					<!-- <p>{{scope.row.servceName}} <span style="color: red;">({{scope.row.servceCost}})</span></p> -->
					<p> {{ scope.row.userName }}<span style="color: red;" v-show="scope.row.cost != undefined&&scope.row.cost != ''">
							({{ scope.row.cost + ')' + '\n' }}</span></p>
				</template>
			</el-table-column>









			<el-table-column :prop="item.prop" :label="item.title" :key="index" v-else-if="item.prop == 'userNameOrder'"
				align="center">
				<template slot-scope="scope" v-if="item.prop == 'userNameOrder'">
					<!-- <p>{{scope.row.servceName}} <span style="color: red;">({{scope.row.servceCost}})</span></p> -->
					<p> {{ scope.row.userName }}<span style="color: red;" v-show="scope.row.cost != null"> ({{ scope.row.cost
					}})</span>
					</p>
				</template>
			</el-table-column>

			<el-table-column :prop="item.prop" :label="item.title" :key="index" v-else-if="item.prop == 'score'" align="center">
				<template slot-scope="scope" v-if="item.prop == 'score'">
					<img :src="scope.row.iconUrl" alt="">
					<p>{{ scope.row.score }}</p>
				</template>
			</el-table-column>

			<el-table-column :prop="item.prop" :label="item.title" :key="index" v-else align="center">
				<!-- <template slot-scope="scope" >
					<p :style="{color:getColorBycol(scope)}" ></p>
				</template> -->
			</el-table-column>
		</template>
		<el-table-column fixed="right" label="员工属性" v-if="options.noradio" align="center" width="300px">
			<template slot-scope="scope">
				<!-- <el-button v-for="(opt,index) in options.radiolist" :type="opt.isBtn?'':'text'" @click="$emit(opt.title,scope.row)" size="small"
				:style="{color:getColorByNation(scope,opt)}"
				>{{opt.name}}</el-button> -->

				<el-radio-group size="small" v-for="(opt, index) in options.radiolist" v-model="scope.row.radioname"
					@change="$emit(opt.title, scope.row)">
					<el-radio-button :value="scope.row.radioname" :label="opt.name">{{ opt.name }}</el-radio-button>

				</el-radio-group>




			</template>
		</el-table-column>
		<el-table-column fixed="right" label="操作" v-if="options.noOperation" align="center">
			<template slot-scope="scope">
				<el-button v-for="(opt, index) in options.operation" :type="opt.isBtn ? '' : 'text'"
					@click="$emit(opt.title, scope.row)" size="small" v-show="opt.name != '支付失败' && scope.row.sysetmStatus != '2'"
					:style="{ color: getColorByNation(scope, opt) }">
					{{ opt.name == '开放展示' ? (scope.row.judge == '0' ? '开放展示' : '') : opt.name == '拉黑' ? (scope.row.deleted ==
						'0' ? '拉黑' : '取消拉黑') : opt.name == '添加认证二维码' ? (scope.row.personnelStandard !=
							undefined ? '已添加认证二维码' : '添加认证二维码') : scope.row.statuss == '无意愿' ? '-' : scope.row.statuss == '录取' ? '-' :
								scope.row.statuss == '未录取' ? '-' : opt.name == '置顶' ? (scope.row.istop
									== '0' ? '置顶' : '') : opt.name == '取消置顶' ? (scope.row.istop == '1' ? '取消置顶' : '') : opt.name == '添加备注' ?
										(scope.row.remark ==
											undefined ? '添加备注' : '查看备注') : opt.name }}</el-button>
				<el-button class="red" v-for="(opt, index) in options.operation" :type="opt.isBtn ? '' : 'text'"
					@click="$emit(opt.title, scope.row)" size="small" v-show="opt.name == '支付失败'"
					:style="{ color: getColorByNation(scope, opt) }">
					{{ opt.name }}
				</el-button>
				<el-button class="red" v-for="(opt, index) in options.operation" :type="opt.isBtn ? '' : 'text'"
					@click="$emit(opt.title, scope.row)" size="small" v-show="scope.row.sysetmStatus == '2'">
					<span v-show="opt.name != '后台账户设置'" style="color: #409EFF;">{{ opt.name }}</span>
					<span v-show="opt.name == '后台账户设置'" :style="{ color: getColorByNation(scope, opt) }">{{ scope.row.sysetmStatus
						== 1 ? '后台账户设置' : '后台账户已设置' }}</span>
				</el-button>
				<!-- <el-button v-for="(opt, index) in options.operation" :type="opt.isBtn ? '' : 'text'"
					@click="$emit(opt.title, scope.row)" size="small" class="ss" v-show="opt.name != '后台账户设置'"
					style="color:#409EFF !important">{{ opt.name }}</el-button> -->
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
export default {
	props: {
		options: {
			type: Object,
			require: true
		},
		height: {
			default: 'auto'
		}
	},
	methods: {
		handleClick(row) {
			console.log(row);
		},

		format() {

		},


		getColorByNation(scope, opt) {
			// console.log(opt.title);
			// console.log(scope); // 打印一下传过来的scope是对应表格不同行的整行的数据，如下有图片： 
			// console.log(opt);
			if (scope.row.status == 1 && scope.row.account != '' && opt.title != 'editLookDialog' && opt.title != 'openLookDialog') {
				return "red"
			} else if (scope.row.companystatus == '审核通过') {
				return "green"
			} else if (opt.name == '注销') {
				return "red"
			} else if (opt.name == '取消置顶') {
				return "red"
			} else if (scope.row.sysetmStatus == 2) {
				return '#f1ca36'
			} else if (scope.row.sysetmStatus == 1) {
				return '#409EFF'
			}

			if (opt.title == 'editLookDialog') {
				console.log('777');
				return "#409Eff"
			}
			else if (opt.title == 'openLookDialog') {
				console.log('222')
				return "#409Eff"


			}

			if (scope.row.materialsStock < 0) {
				console.log(22223);
				return "#ff051e"
			} else if (scope.row.materialsStock > 0) {
				return "#409Eff"
			}


		},
		getColorBycolUpload(scope) {
			if(scope.row.cooperation == '待上传'){
				return "red"
			}
		},

		getColorBycol(scope) {
			// console.log(scope); // 打印一下传过来的scope是对应表格不同行的整行的数据，如下有图片： 
			console.log(scope, '1111111');
			if (scope.row.companystatus == '审核通过') {
				return "green"
			}
			if(scope.row.cooperation == '待上传'){
				return "red"
			}
			scope.data.forEach(item => {
				if (item.materialsStock > 0) {
					return "bule"
				} else if (item.materialsStock < 0) {
					return "red"
				}
			})
		},


	},
	created() {
		this.tableData = this.options.data;
		console.log(this.options)
	},
	data() {
		return {
			tableData: []
		}
	},
	watch: {
		'options'() {
			this.tableData = this.options.data;
		},
		'options.data'() {
			this.tableData = this.options.data;
		}
	}
}
</script>

<style scoped="scoped">
.table {
	width: 100%;
	margin-top: 20px;
}

.gary {
	color: gray !important;
}

/deep/.el-table__body {
	width: 100% !important;
}

.red {
	color: red
}

.project-status {
	color: #409EFF;
	cursor: pointer;
}

.ck {
	color: rgb(88, 88, 88);
}
</style>
